<script setup lang="ts">
import { ref } from 'vue';
import SwitchBar from './components/SwitchBar.vue';
import DifferentBar from './components/diff/Diff.vue';
import React from './components/react/React.vue';
import Computed from './components/computed/Index.vue';
import BizPage from './components/customHooks/BizPage.vue';

let show = ref<string>("/dif")

function switchTo(path: string) {
    show.value = path
}
</script>

<template>
    <SwitchBar @choose="switchTo" />

    <div class="h-20"></div>
    <div class="app-container" v-show="show !== '/hooks'">
        <DifferentBar v-if="show === '/dif'" />
        <React v-if="show === '/react'" />
        <Computed v-if="show === '/computed'" />
    </div>
    <BizPage v-if="show === '/hooks'" />
</template>

<style scoped></style>
